import { columnsFormat } from '../columns/columns';
import layTable from './layTable.art'
import tableRender from './table.art'
import './table.css'
import Loading from "../loading/loading";


class Table {
    constructor(tableConfig) {
        this.version  = '0.0.1';
        this.$        = tableConfig.laymodule.jq;
        this.laypage  = tableConfig.laymodule.laypage;
        this.selector = tableConfig.selector;
        this.element  = tableConfig.laymodule.element;
        this.form     = tableConfig.laymodule.form;
        this.layer     = tableConfig.laymodule.layer;

        this.loading  = new Loading(tableConfig)
    }

    setWidth (width) {
        this.$(this.selector).css({
            width: width
        });
    }

    getData (data, next) {
        const _this = this;
        this.loading.open();
        const defaultData = {
            url: '/sysRole/demoInterface.do',
            type: 'POST',
            dataType: 'json',
        };
    
        const mergeData = Object.assign({}, defaultData, data);
        console.log(mergeData)
    
        this.$.ajax(mergeData).then(function(data) {
            if (data.errorCode === 'y') {
                next(data);
            } else {
                console.log(data.errorText)
            }
            _this.loading.close();
        })
    }

    selectNum () {
        return Object.keys(this.currClicked).length;
    }

    // 选择表格
    clicked(data) {
        const _this = this;
        
        // 初始化未定义的数据结构
        // if (_this.currClicked === undefined) {
            _this.currClicked = {};
        // }
        
        this.form.render('checkbox');
        this.form.on('checkbox(listChoose)', function(item) {
            const index = _this.$(item.elem).parents("tr").index();
    
            if (item.elem.checked) {
                _this.currClicked[_this.$(item.elem).attr('data-id')] = data.data.list[index];
            } else {
                delete _this.currClicked[_this.$(item.elem).attr('data-id')];
            }
            console.log(_this)
        });
    }

    getCurrClicked() {
        return this.currClicked;
    }

    setCurrClicked(data) {
        console.log(data)
        const _this = this;
        // _this.$(item.elem).parents("tr")
        for (let list in data) {
            _this.$(_this.selector).find('tbody input[type="checkbox"][data-id="'+  list +'"]').attr("checked", true);
        }
        _this.currClicked = data;
        this.form.render('checkbox');
    }

    clearClicked(data) {
        delete this.currClicked;
        this.$(this.selector).find('tbody input[type="checkbox"]').attr("checked", false);
        this.clicked(data)
    }

    render(data) {
        const tableHtml = tableRender(data);
        this.$(this.selector).find('.etable-table').html(tableHtml)
    }

    initLayout() {
        this.$(this.selector).addClass('etable-box').html(layTable({})); //初始化结构
    }

    init() {
        const _this = this;
        this.initLayout();
        if (this.tableConfig.width) {
            _this.setWidth(this.tableConfig.width);
        }
        this.getData({
            data:{
                type: 'get',
                page:'all'
            }
        }, function(data) {
            _this.columnsFormat(data);
            _this.render(data);
            _this.clicked(data);
        })
    }
}

export default Table;